<template>
  <div>
    <NoteSearch @search="search"></NoteSearch>
    <el-table :data="NoteState.noteTable" border v-loading="NoteState.loading">
      <el-table-column label="数量" type="index" width="50px" align="center"> </el-table-column>
      <el-table-column label="id" prop="_id" width="100px" align="center" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column label="类型" prop="type_id" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <!-- 0、其他 1、jquery 2、javascript 3、vue 4、uniapp  -->
          <span v-if="scope.row.type_id==0">其他</span>
          <span v-if="scope.row.type_id==1">jquery</span>
          <span v-if="scope.row.type_id==2">javascript</span>
          <span v-if="scope.row.type_id==3">vue</span>
          <span v-if="scope.row.type_id==4">uniapp</span>
        </template>
      </el-table-column>
      <el-table-column label="标题" prop="title" align="center" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column label="最后修改时间" prop="updated" width="140px" align="center"> </el-table-column>
      <el-table-column label="操作" width="200px" align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" @click="edit(scope.row._id,scope.row.title,scope.row.content,scope.row.type_id)">修改</el-button>
          <el-button type="danger" icon="el-icon-delete" @click="del(scope.row._id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <AddNote @search="search"></AddNote>
  </div>
</template>

<script>
import NoteSearch from '../components/NoteSearch'
import AddNote from '../components/AddNote'
import { noteList, noteDel } from "../api/module/note";
import { mapState } from 'vuex'
export default {
  components: { NoteSearch, AddNote },
  props: [],
  data () {
    return {
    };
  },
  computed: {
    ...mapState('Note', { //使用如下 {{ NoteState.name }}  console.log(this.NoteState.name)
      NoteState: state => state
    }),
  },
  methods: {
    /**查询列表 */
    search () {
      this.NoteState.loading = true;
      noteList(this.NoteState.noteSearch).then((result) => {
        this.NoteState.noteTable = result.map(item => ({
          _id: item._id,
          type_id: item.type_id,
          title: item.title,
          updated: this.utils.formattingTime(item.updated)
        }));
        this.NoteState.loading = false;
      })
    },
    /**修改 */
    edit (_id, title, content, type_id) {
      this.NoteState.addDialog = true;
      this.NoteState.addData._id = _id;
      this.NoteState.addData.title = title;
      this.NoteState.addData.content = content;
      this.NoteState.addData.type_id = type_id;
    },
    /**删除 */
    del (_id) {
      noteDel({ _id: _id }).then(() => {
        this.search();
      })
    }
  },
  mounted () {
    this.search()
  },
};
</script>

<style>
.seach-width {
  width: 700px;
  margin-left: 15px;
}
.seach-select {
  width: 150px;
}
</style>